import { useRef, useMemo, useState } from "react";
import eventExtension from '@/pages/utils/eventExtension'
import { useVisionStore, useForceUpdate } from '@/pages/index'

const DynamicDiscernCode = 'DynamicDiscern'



export default function DynamicDiscern(props: any) {
  const store = useVisionStore()
  const { event } = store

  const [targetOpNodeArr, setTargetOpNodeArr] = useState<any>([]);

  useMemo(() => {
    event.addQueue('mousemove', {
      code: DynamicDiscernCode,
      callBack: (e: any) => {
        const opNodeList = store.getOpNodeList()
        const _targetOpNodeArr = opNodeList.filter((node: any) => {
          const dragNode = store.moveOpNode;
          const dropNode = node;
          const _dragTag = dragNode.code
          const _dropReceive:any[] = dropNode.dataProps?.receipt || []
          return _dropReceive.includes(_dragTag)
        });
        setTargetOpNodeArr(_targetOpNodeArr)
      },
    });
    event.addQueue('mouseup', {
      code: DynamicDiscernCode,
      callBack: () => {
        setTargetOpNodeArr([])
      }
    });
  }, []);


  const targetOpNodeStyleArr = targetOpNodeArr.map((_opNode: any) => {
    // return getStyle(_opNode);
    const position = _opNode.dom.current.getBoundingClientRect()
    
    return {
      y: position.top,
      x: position.left,
      w: position.width,
      h: position.height,
    }
  });

  return (
    <div
      className="dynamicDiscern"
    >
      {targetOpNodeStyleArr.map((ItStyle:any, i:number) => (
        <div
          key={targetOpNodeArr?.[i].id}
          className="dynamicDiscernItem"
          style={{
            ...eventExtension.modifyStyleTsForm(ItStyle),
          }}
        />
      ))}
    </div>
  );
}